import React from 'react'
import { Col, Icon, Row } from 'antd'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import SerialBox from './common/serial-box'
import VideoBox from './common/video-box'
import NavMenu from './common/nav-menu'
import { getTopVideos } from '../actions/video'
import { getTopSerials } from '../actions/serial'

class HomePageBody extends React.Component {
  componentDidMount () {
    this.props.getTopSerials()
    this.props.getTopVideos()
  }

  render () {
    const {topSerials, topVideos} = this.props

    return <div>
      <NavMenu />

      <h2 className='divider'><b>系列视频</b></h2>
      <Row type='flex' gutter='40'>
        {
          topSerials.map(serial =>
            <Col span={6} className='margin-b-3'>
              <SerialBox serial={serial} />
            </Col>)
        }
      </Row>
      <Row type='flex' justify='end' style={{marginTop: 10}}>
        <Link to='/serials'>更多<Icon type='more' /></Link>
      </Row>

      <h2 className='divider'><b>视频课程</b></h2>
      <Row type='flex' gutter='40' >
        {topVideos.map(video =>
          <Col span={6} className='margin-b-3'>
            <VideoBox video={video} />
          </Col>)
        }
      </Row>
      <Row type='flex' justify='end' style={{marginTop: 10}}>
        <Link to='/videos'>更多<Icon type='more' /></Link>
      </Row>
    </div>
  }
}

const mapStateToProps = ({topVideos, topSerials}) => ({
  topSerials,
  topVideos
})

const mapDispatchToProps = dispatch => ({
  getTopSerials: () => dispatch(getTopSerials()),
  getTopVideos: () => dispatch(getTopVideos())
})

export default connect(mapStateToProps, mapDispatchToProps)(HomePageBody)
